import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import './index.less'

interface NavBarProps {
    title?: string;           // 导航栏标题
    background?: string;      // 背景色
    color?: string;           // 文字颜色
    fixed?: boolean;          // 是否固定定位
    placeholder?: boolean;    // 是否生成占位元素
    homeButton?: boolean;     // 是否显示返回首页按钮
    back?: boolean;           // 是否显示返回按钮
    delta?: number;           // 返回的页面层数
    renderLeft?: React.ReactNode;  // 左侧自定义内容
    renderRight?: React.ReactNode; // 右侧自定义内容
    children?: React.ReactNode;
}

const NavBar: React.FC<NavBarProps> = (props) => {
    const {
        title = '',
        background = '#ffffff',
        color = '#000000',
        fixed = true,
        placeholder = true,
        homeButton = false,
        back = true,
        delta = 1,
        renderLeft,
        renderRight,
        children
    } = props

    const [height, setHeight] = useState(44)
    const [paddingTop, setPaddingTop] = useState(0)

    useEffect(() => {
        // 获取系统信息设置导航栏高度
        const systemInfo = Taro.getSystemInfoSync()
        const { statusBarHeight, platform } = systemInfo
        let navHeight = 44
        if (platform === 'android') {
            navHeight = 48
        }
        setHeight(navHeight)
        setPaddingTop(statusBarHeight || 0)
    }, [])

    const handleBack = () => {
        if (delta > 1) {
            Taro.navigateBack({ delta })
        } else {
            Taro.navigateBack()
        }
    }

    const handleHome = () => {
        Taro.switchTab({ url: '/pages/index/index' })
    }

    const navBarStyle = {
        background,
        color,
        height: `${height + paddingTop}px`,
        paddingTop: `${paddingTop}px`
    }

    return (
        <View className='nav-bar-container'>
            {fixed && placeholder && (
                <View
                    className='nav-bar-placeholder'
                    style={{ height: `${height}px` }}
                />
            )}
            <View
                className={`nav-bar ${fixed ? 'fixed' : ''}`}
                style={navBarStyle}
            >
                <View className='nav-bar-content'>
                    <View className='nav-bar-left'>
                        {renderLeft || (
                            <>
                                {back && (
                                    <View className='nav-bar-button' onClick={handleBack}>
                                        <Text className='nav-bar-icon'>←</Text>
                                    </View>
                                )}
                                {homeButton && (
                                    <View className='nav-bar-button' onClick={handleHome}>
                                        <Text className='nav-bar-icon'>⌂</Text>
                                    </View>
                                )}
                            </>
                        )}
                    </View>

                    <View className='nav-bar-title'>
                        {title || children}
                    </View>

                    <View className='nav-bar-right'>
                        {renderRight}
                    </View>
                </View>
            </View>
        </View>
    )
}
export default NavBar
